<template>
  <div class="feed-container">
    <div class="feed-list" ref="feedList">
      <ul>
        <li v-for="i in logs">
          <div class="feed-item">[{{ i.createTime }}] {{ i.content }}</div>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { getHandleLogs } from "@/api/response/log";
export default {
  name: "HandleFeedLogView",
  props: {
    id: { type: String },
    type: { type: Number },
    time: { type: Number, default: 1000 * 60 * 0.1 },
    handleing: { type: Boolean, default: true },
  },
  data() {
    return {
      logs: [],
      lastTimeStamp: 0,
      timer: null,
    };
  },
  mounted() {
    // 开始定时查询日志
    if (this.timer == null) {
      this.getHandleLogs();
      if (this.handleing) {
        // 如果是正在处置的预案则定时更新，否则就没有更新的必要
        this.timer = setInterval(() => {
          this.getHandleLogs();
        }, this.time);
      }
    }
    // 监听关闭事件
    this.$bus.$on("monitor-detail-destroy", () => {
      if (this.timer) {
        clearInterval(this.timer);
      }
    });
  },
  methods: {
    getHandleLogs() {
      const moment = require("moment");
      getHandleLogs(this.id, this.type, this.lastTimeStamp).then(res => {
        if (res.data.length > 0) {
          res.data.forEach(element => {
            this.logs.push(element);
          });
          // 记录最后一条的时间戳
          this.lastTimeStamp = moment(res.data[res.data.length - 1].createTime, "YYYY-MM-DD HH:mm:ss").unix();
          this.$nextTick(() => {
            // 自动滚动到底部
            this.$refs.feedList.scrollTop = this.$refs.feedList.scrollHeight;
          });
        }
      });
    },
  },
  beforeDestroy() {
    // 销毁定时器
    if (this.timer != null) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
};
</script>
<style lang="scss" scoped>
.feed-container {
  background: #0b133c;
  color: white;
  border-radius: 10px;
  padding: 15px;

  .feed-list {
    overflow-y: scroll;
    height: 300px;

    // 设置滚动条宽度
    &::-webkit-scrollbar {
      width: 8px !important;
      height: 8px !important;
      background: rgba(10, 122, 227, 0.01);
    }

    //滚动条的哈滑块
    &::-webkit-scrollbar-thumb {
      background: #2e6190;
      border-radius: 3px;
    }

    .feed-item {
      font-size: 12px;
      line-height: 25px;
    }
  }
}

ul,
li {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}
</style>
